<template>
  <span class="highlighted-text">
  <span>{{text.substring(0, range.startIndex)}}</span>
  <span class="matched-text">{{text.substring(range.startIndex, range.endIndex)}}</span>
  <span>{{text.substring(range.endIndex)}}</span>
</span>
</template>

<script>
export default {
  props: {
    text: String,
    range: Object
  }
}
</script>

<style scoped>
.highlighted-text {
  font-size: 0;
  line-height: 0px;
  transition: 2s color,background ease-in-out;
}

.highlighted-text span {
  font-size: 14px;
}

.highlighted-text .matched-text {
  background: #303133;
  color: #fff;
}
</style>